<template>
	<view>
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="实名认证"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">

		</view>
		<view class="" style="width: 92%;margin: 0 auto;position: relative;z-index: 1;padding-top: 15px;">
			<view class="flex" style="justify-content: space-around;align-items: flex-start;">
				<view class="flex" style="flex-direction: column;al">
					<image style="width: 30px;height: 30px;" src="/static/font/31.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #0C3283;padding-top: 10px;">实名认证</text>
				</view>
				<view class="" style="width: 54px;height: 3px;background: #D4E5F8;border-radius: 70px 70px 70px 70px;margin-top: 15px;">
					
				</view>
				<view class="flex" style="flex-direction: column;">
					<image style="width: 30px;height: 30px;" src="/static/font/32.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #999999;padding-top: 10px;">绑定支付宝</text>
				</view>
				<view class="" style="width: 54px;height: 3px;background: #D4E5F8;border-radius: 70px 70px 70px 70px;margin-top: 15px;">
					
				</view>
				<view class="flex" style="flex-direction: column;">
					<image style="width: 30px;height: 30px;" src="/static/font/33.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #999999;padding-top: 10px;">填写银行卡</text>
				</view>
			</view>
			<view style="border-radius: 10px;padding-top: 12px;">
				<view style="padding-bottom: 15px;">
					<view style="">
						<view style="padding: 15px ;border-bottom: 1px solid #EBEDEE;background: #F9F9F9;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="username" placeholder="请输入真实姓名" border="none">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入真实姓名" border="none">
									<!-- #endif -->
									<u--text class="tit" text="真实姓名" slot="prefix" margin="0 15px 0 0" type="tips">
									</u--text>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
						<view style="padding: 15px ;background: #F9F9F9;margin-top: 12px;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="card" placeholder="请输入身份证号" border="none">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入身份证号" border="none">
									<!-- #endif -->
									<u--text class="tit" text="身份证号" slot="prefix" margin="0 15px 0 0" type="tips">
									</u--text>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</view>
				</view>
				<view v-if="com_info&&com_info.is_open_idcard=='1'"
					style="background-color: #fff;padding: 15px 0;border-radius: 10px;">
					<view style="" style="padding: 0 15px ;">
						<view class="flex">
							<view style="font-size: 16px;margin-right: 10px;color: #1D1F20;font-weight: 400;">上传身份证照片
							</view>
							<view class="flex" style="position: relative;">
								<u-icon @click="btn_flag" name="info-circle-fill" color="#FFA724" size="18"></u-icon>
								<view style="margin-left: 3px;font-size: 14px;color: #FFA724;font-weight: 400;">注意事项
								</view>
								<view v-show="flag" class="tips">
									请绑定本人身份信息，若填写错误
									将导致无法成功打款
								</view>
							</view>
						</view>
					</view>
					<view style="padding: 15px 15px;">
						<view class="flex" style="width: 100%;flex-direction: column;align-items: flex-start;">
							<view class="flex"
								style="flex-direction: column;align-items: flex-start;margin-bottom: 12px;">
								<text style="font-size: 14px;font-weight: 500;color: #333333;">第1步：请拍摄您的身份证正面</text>
								<text
									style="font-size: 11px;font-weight: 500;color: #ADADAD;padding-top: 12px;">请保持身份证完整清晰</text>
							</view>
							<u-upload width="268" height="170" :fileList="fileList1" @afterRead="afterRead"
								@delete="deletePic" name="1" multiple :maxCount="1">
								<view class="rxm"
									style="display: flex;align-items: center;justify-content: center;width: 100%;flex-direction: column;">
									<image src="/static/font/37.png" mode="" style="width: 37px;height: 37px;"></image>
									<view style="text-align: center;font-size: 14px;margin-top: 10px;color: #2038CA;">
										上传身份证正面</view>
								</view>
							</u-upload>
						</view>

						<view class="flex"
							style="margin-top: 30px;width: 100%;flex-direction: column;align-items: flex-start;">
							<view class="flex"
								style="flex-direction: column;align-items: flex-start;margin-bottom: 12px;">
								<text style="font-size: 14px;font-weight: 500;color: #333333;">第1步：请拍摄您的身份证反面</text>
								<text
									style="font-size: 11px;font-weight: 500;color: #ADADAD;padding-top: 12px;">请保持身份证完整清晰</text>
							</view>
							<u-upload width="268" height="170" :fileList="fileList2" @afterRead="afterRead"
								@delete="deletePic" name="2" multiple :maxCount="1">
								<view class="tkm"
									style="display: flex;align-items: center;justify-content: center;width: 100%;flex-direction: column;">
									<image src="/static/font/37.png" mode="" style="width: 37px;height: 37px;"></image>
									<view style="text-align: center;font-size: 14px;margin-top: 10px;color: #2038CA;">
										上传身份证反面</view>
								</view>
							</u-upload>
						</view>

					</view>
				</view>
			</view>
			<view style="margin-top: 15px;">
				<u-button @click="step" shape='circle' type="primary" text="下一步"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config/index.js'
	export default {
		data() {
			return {
				com_info: null,
				value: '',
				fileList1: [],
				fileList2: [],
				flag: false,
				card: '',
				username: '',
				apiurl: config.prodBase,
				idcardA: '',
				idcardB: '',
				bgColor: 'rgba(255,255,255,0)',
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = 'rgba(255,255,255,1)'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		onLoad(e) {
			if (e.id == '1') {
				this.info()
			}
		},
		onShow() {
			this.common()
		},
		methods: {
			async common() {
				let res = await this.$http.index.index();
				if (res.code == 1) {
					this.com_info = res.data;
				}
			},
			async info() {
				let res = await this.$http.index.my_index()
				if (res.code == 1) {
					this.username = res.data.userinfo.card_name
					this.card = res.data.userinfo.idcardNum
					this.idcardA = res.data.userinfo.idcardA
					this.idcardB = res.data.userinfo.idcardB
					this.fileList1.push({
						url: this.idcardA
					})
					this.fileList2.push({
						url: this.idcardB
					})
				}

			},
			//下一步
			async step() {
				if (this.username == '') {
					this.$tips('请填写真实姓名')
					return
				}
				if (this.card == '') {
					this.$tips('请填写身份证号')
				}

				if (this.com_info.is_open_idcard == '0') {
					let res = await this.$http.index.readNameJing({
						card_name: this.username,
						idcardNum: this.card
					})
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/me/account'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				} else {
					let res = await this.$http.index.realName({
						card_name: this.username,
						idcardNum: this.card
					})
					if (res.code == 1) {
						this.idcard(res.data.user_id)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				}

			},
			async idcard(e) {
				let res = await this.$http.index.uploadIdcard({
					user_id: e,
					idcardA: this.idcardA,
					idcardB: this.idcardB,
					card_name: this.username,
					idcardNum: this.card
				})
				console.log(res);
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/me/account'
					})
				} else {
					this.$tips(res.msg)
				}
			},
			btn_flag() {
				this.flag = !this.flag
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, event.name)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, type) {
				console.log(url, type);
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.apiurl + 'common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							token: uni.getStorageSync('token')
						},
						formData: {},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (type == '1') {
								this.idcardA = data.data.fullurl
							} else {
								this.idcardB = data.data.fullurl
							}
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .uicon-info-circle-fill {
		line-height: initial !important;
	}

	.tips {
		background-image: url('@/static/img/49.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 13px 15px 8px;
		font-size: 12px;
		color: #FFFFFF;
		position: absolute;
		width: 210px;
		left: -151%;
		top: 103%;
		z-index: 20;
	}

	/deep/.u-text__value--tips {
		font-weight: 400 !important;
		color: #1D1F20 !important;
	}

	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF,
	}

	.flex {
		display: flex;
		align-items: center;
	}

	/deep/.u-upload {
		// align-items: center;
	}

	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}

	.tkm {
		background-image: url('@/static/font/36.png');
		height: 170px;
		background-size: 100% 100%;
		width: 268px !important;
	}

	.rxm {
		background-image: url('@/static/font/36.png');
		height: 170px;
		background-size: 100% 100%;
		width: 268px !important;
	}

	/deep/uni-view.u-upload__wrap {
		width: 100%;
	}
</style>
<style>
	page {
		background-color: #F7F9FA;
	}
</style>